<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue-range demo</title>
  <style>
      #app {
        width: 800px;
        margin: 100px auto;
      }
  </style>
</head>
<body>
  <div id="app">
    <template>
      <vue-range v-model="val" :end-func="endFn"></vue-range>
      <!-- <vue-range v-model="val" ></vue-range> -->
      {{ val }}
      <br>
      <br>

       <vue-range :step="valStep" v-model="val2">
        <div slot="start">start</div>
        <div slot="end">end</div>
      </vue-range>
      {{valStep}} - {{ val2 }}
      <br>
      <br>
      <br>
      
      <span>disable:</span>
      <vue-range disabled v-model="val3"></vue-range>
      <br>
      <br>
      <br>


      <span>height: 3</span>
      <vue-range :bar-height="3" v-model="val4"></vue-range>
      <br>
      <br>
      <br>

      <span>min: 10</span>
      <vue-range :min="10" :max="max" v-model="val5">
        <div slot="start">10</div>
        <div slot="end">{{ max }}</div>
      </vue-range>
    </template>
  </div>
  <script src="./build.js"></script>
</body>
</html>